<template>
	<view>

		<nav-header title="设置备注" :show-right="false">
		</nav-header>

		<view class="nickname">
			<text class="text-sm-Semibold">昵称/原备注：{{userInfo.nickName}}</text>
		</view>
		<view class="beizhu">
			<view class="title">
				<text class="text-sm-Medium">好友备注</text>
				<text class="text-sm-Regular">{{nameNum}}/20</text>
			</view>
			<uni-easyinput type="text" v-model="nickName" @input="countName" maxlength="20" placeholder="默认是好友昵称" :inputBorder="false" />
			<!-- <button class="confirm-text btncolor" @click="submitForm">确认</button> -->
		</view>
		
		<view class="commit">
			<view class="button-style">
				<button class="btncolor" @click="submitForm">
					<text class="text-md-Medium" style="color: #fff;">确认</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				nickName: "",
				nameNum:0
			}
		},
		methods: {
			submitForm() {
				if(this.nickName==""){
					uni.showToast({
						icon:"none",
						title:"请输入您要设置的备注"
					})
					return
				}
				let friend = JSON.parse(JSON.stringify(this.friendInfo));
				friend.nickName = this.nickName;
				this.userInfo.nickName=this.nickName;
				
				let data = {
					id: this.userInfo.id,
					nickName: this.nickName
				}
				this.$http({
					url: "/friend/update",
					method: "PUT",
					data: data
				}).then(() => {
					// 更新好友列表中的昵称和头像
					this.friendStore.updateFriend(friend);
					// 更新会话中的头像和昵称
					this.chatStore.updateChatFromFriend(this.userInfo);
					uni.showToast({
						title: "修改成功",
						icon: "none"
					})

					setTimeout(() => {
						// 回退并刷新
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.loadUserInfo(this.userInfo.id);
						uni.navigateBack();
					}, 1000);
				})
			},
			loadUserInfo(id) {
				this.$http({
					url: "/friend/find/" + id,
					method: 'GET'
				}).then((user) => {
					this.userInfo = user;
				})
			},
			countName(e){
				this.nameNum=e.length
			}
		},
		computed: {
			friendInfo() {
				let friends = this.friendStore.friends;
				let friend = friends.find((f) => f.id == this.userInfo.id);
				return friend;
			}
		},
		onLoad(options) {
			// 查询用户信息
			this.loadUserInfo(options.id);
		}
	}
</script>

<style lang="scss" scoped>
	.nickname {
		padding: 60rpx 32rpx 0 32rpx;
		color: #a1a1a1;
	}

	.beizhu {
		display: flex;
		flex-direction: column;
		padding: 24rpx 32rpx;
		gap: 24rpx;
		
		:deep(.uni-easyinput__content){
			background-color: $gray-100 !important;
		}
		
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			text:first-child{
				color: $gray-900;
			}
			text:last-child{
				color: $gray-400;
			}
		}
		
		.btncolor {
			line-height: 75rpx;
			font-size: 30rpx;
			background-color: #048df5;
			color: #fff;
		}

		button {
			margin-top: 80rpx;
		}
	}
	
	.commit {
		width: 100%;
		position: fixed;
		bottom: 42rpx;
		left: 0;
		border-top: 1rpx solid $gray-200;
		display: flex;
		justify-content: center;
		align-items: center;
	
		.button-style {
			padding: 24rpx 32rpx;
			width: 100%;
		}
	
		.btncolor {
			width: 100%;
			background-color: $brand-500;
			color: $white;
			border-radius: 34rpx;
			padding: 8rpx 24rpx;
			line-height: 60rpx;
			text-align: center;
		}
	}
</style>